<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 路♥克
  Date: 2017/12/5
  Time: 2:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/web/"/>
    <meta charset="UTF-8">
    <title>Document</title>
    <jsp:include page="elments_views/js.jsp"/>
    <link rel="stylesheet" type="text/css" href="frame/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="frame/bootstrap/css/button.css">
    <!-- 	<link rel="stylesheet" type="text/css" href="frame/bootstrap/css/bootstrap-theme.min.css"> -->
    <link rel="stylesheet" type="text/css" href="frame/css/layout.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <%--<script type="text/javascript" src="frame/myfocus/js/myfocus-2.0.1.min.js"></script>--%>
    <style type="text/css">
        .panel{margin-bottom: 0px;}
        .panel .panel-heading{border-radius: 0px;background: white;margin:0px;color: black;font-weight: bolder;font-size: 16px;padding-bottom: 0px;}
        .panel .panel-heading p.first-menu{border-left: 5px solid red;padding-left: 15px;}
        .panel .list-group li{border: none;padding-left: 50px;}
        .panel .list-group li a{color: black;}
        .panel .list-group li.active{background: #f9f9f9;font-weight: bold;}
        .panel .panel-heading p.date-source{font-weight:normal;color: #cfcfcf;}
    </style>
</head>
<body>
<jsp:include page="elments_views/header.jsp"/>
<div class="container" style="margin-top: 120px;">
    <div class="row">
        <jsp:include page="elments_views/about-nav.jsp"/>
        <div class="col-md-9">
            <div class="panel">
                <div class="panel-heading">
                    <h3>安全设置</h3>
                    <hr>
                </div>
                <div class="panel-body" style="min-height: 500px;">
                    <%----%>
                    <form id="updatepasswordfrom" class="form-horizontal" action="/WebSysUser/updatePassword" method="post" onsubmit="return updatepasswordfrom()">
                        <input type="hidden" name="id" value="${user.id}">
                        <div class="form-group">
                            <label  class="col-sm-2 control-label"></label>
                            <div class="col-sm-10">
                                <label  style="color: red;margin-left: 10%">${updatePasswordMessage}</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">手机号：</label>
                            <div class="col-sm-10">
                                <input type="text" name="phone" class="form-control" style="width:58%;float: left" onblur="userCenterPhoneBlur(this)" value="${user.phone}" id="userCenterPhone" placeholder="phone"/>
                                <%--<input type="text" name="phone" id="userCenterPhone" onblur="userCenterPhone(this)"--%>
                                       <%--class="form-control myphone" value="${user.phone}" />--%>
                                <label id="userCenterPhoneMsg"></label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">验证码：</label>
                            <div class="col-sm-6">
                                <div class="input-group">
                                    <input type="text" id="updatecode" name="code" class="form-control" placeholder="proving">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" id="updatetoken" type="button" disabled="disabled">获取验证码</button>
                                    </span>
                                </div><!-- /input-group -->
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="newpassword" class="col-sm-2 control-label">新密码：</label>
                            <div class="col-sm-10">
                                <input type="password" name="token" class="form-control" style="width:58%;float: left" onblur="updatepasswordBlur(this)" id="newpassword" placeholder="password">
                                <label id="updatepasswordMsg"></label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="newrepassword" class="col-sm-2 control-label">确认密码：</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" style="width:58%;float: left" onblur="updaterepasswordBlur(this)" id="newrepassword" placeholder="repassword">
                                <label id="updaterepasswordMsg"></label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default">我已修改完成，立即保存!</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="elments_views/footer.jsp"/>
</body>
</html>
<script>
    function updatepasswordfrom() {
        if(!/^[1][3,4,5,7,8][0-9]{9}$/.test($("#userCenterPhone").val())){
            $("#userCenterPhoneMsg").text("格式错误")
            return false;
        }
        if(!$("#updatecode").val().length>0){
            return false;
        }
        if(!/^.{6,20}$/.test($("#newpassword").val())){
            return false;
        }
        if($("#newpassword").val()!=$("#newrepassword").val()){
            console.info("repasswordBlur");
            return false;
        }
        return true;
    }
//    getValidateCode(phone,$(this));
    $(function () {
        $("#updatetoken").click(function () {
            var phone = $("#updateDataPhone").text();
            getValidateCode(phone,$(this));
        });
        $("#about-nav div ul li").removeClass("active");
        $("#securitySetting").addClass("active");
    });
//密码验证
function updatepasswordBlur(obj) {
    var value = obj.value;
    var code=/^[A-Za-z]+[0-9]+[A-Za-z0-9]*|[0-9]+[A-Za-z]+[A-Za-z0-9]*$/g;
    var msg;
    var color;
    var icon;
    if(code.test(value) && /^.{6,20}$/.test(value)){
        if(value!=''){
            msg="合格";
            color="green";
            icon="ok";
        }else{
            msg="密码不能为空！";
            color="red";
            icon="remove";
        }
    }else{
        msg="密码由6-16个字母和数字组成";
        color="red";
        icon="remove";
    }
    textMessage("updatepasswordMsg",msg,color,icon);
}
function updaterepasswordBlur(obj) {
    var value = obj.value;
    var code=$("#newpassword").val();
    var msg;
    var color;
    var icon;
    if(code==value && value!=''){
        msg="合格";
        color="green";
        icon="ok";
    }else{
        msg="两次密码要一致，密码不能为空！";
        color="red";
        icon="remove";
    }
    textMessage("updaterepasswordMsg",msg,color,icon);
}
//电话号码验证
    function userCenterPhoneBlur(obj){
    var value = obj.value;
    var code=/^[1][3,4,5,7,8][0-9]{9}$/;
    var msg;
    var color;
    var icon;
    if(code.test(value)){
        msg="合格";
        color="green";
        icon="ok";
        $("#updatetoken").removeAttr("disabled");
    }else{
        msg="格式错误!";
        color="red";
        icon="remove";
    }
    textMessage("userCenterPhoneMsg",msg,color,icon);
}
</script>
